<template>
	<view class="detail">
		<view class="bannder">
			<!-- <image class="" :src="goodsDetail.image" style="width: 100%;height: 100%;"
				@click="handleImgBig(goodsDetail.image)" /> -->
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
				style="width: 750rpx; height: 750rpx;">
				<swiper-item v-for="(item,index) in goodsDetail.image">
					<image class="contentImg" :src="item" style="width: 750rpx; height: 750rpx;">
					</image>
				</swiper-item>
			</swiper>
		</view>


		<view class="message">
			<view class="title">
				{{goodsDetail.name}}
			</view>
			<!-- <view class="bottom">
				<view class="bottomitem">
					<view class="">
						{{goodsDetail.brand}}
					</view>
					<view class="lable">
						品牌
					</view>
				</view>
				<view class="bottomitem">
					<view class="">
						1095天
					</view>
					<view class="lable">
						保质期
					</view>
				</view>
				<view class="bottomitem">
					<view class="">
						{{goodsDetail.storage}}
					</view>
					<view class="lable">
						储存条件
					</view>
				</view>
				<view class="bottomitem">
					<view class="">
						{{goodsDetail.capacity}}kg/瓶
					</view>
					<view class="lable">
						规格
					</view>
				</view>
				<view class="bottomitem">
					<view class="">
						见外包装
					</view>
					<view class="lable">
						产地
					</view>
				</view>
			</view> -->
		</view>

		<view class="priceandConcat">
			<view class="sumprice">
				￥{{goodsDetail.price}}
			</view>
			<view v-if="concat" class="cancat" @click="handleCallMoilie">
				<view class="">
					联系店长
				</view>
				<image class="" src="@/static/image/phone.png" style="width: 48rpx;height:48rpx;margin-top: 24rpx;" />
				<view class="" style="font-size: 22rpx;">
					拨打电话
				</view>
			</view>
		</view>

		<view class="" style="width: 100%;margin: 0 auto;">
			<video v-if='goodsDetail.video!= null' :src="goodsDetail.video" style="width: 100%;"></video>
		</view>

		<view class="">
			<image class="" :src="goodsDetail.detail_image" style="width: 750rpx;" mode="widthFix" />
		</view>

		<view class="" style="height: 200rpx;"></view>

		<view class="bottomContent">
			<view class="left">
				<image class="" src="@/static/image/jian.png" style="width: 70rpx;height:70rpx;"
					@click="handleJIANnUM" />
				<view class="number" style="font-size: 48rpx;font-weight: 600;">
					{{number}}
				</view>
				<image class="" src="@/static/image/jia.png" style="width: 70rpx;height: 70rpx;"
					@click="handleJIAnUM" />
			</view>
			<view class="rightBox">
				<!-- <view v-if="!concat" class="btn">
					分享
					<button open-type="share" class="shareBtn"></button>
				</view> -->
				<view class="btn btns" @click="show = true">
					报名
				</view>
			</view>
		</view>

		<u-popup :show="show" mode="center">
			<view class="subAddress">
				<view class="title">
					收货信息
				</view>
				<view class="addressmessage">
					<view class="contentitem">
						<view class="lable">
							姓名
						</view>
						<input v-if="concat" type="text" v-model="userName" class="inputitem" placeholder="请输入姓名" style="margin-left: 30rpx;width: 490rpx;
						height: 80rpx;
						background: #F2F2F2;padding-left: 30rpx;
						box-sizing: border-box;">
						<view v-else class="value">
							{{userinfo.name}}
						</view>
					</view>
					<view class="contentitem">
						<view class="lable">
							手机号
						</view>
						<input v-if="concat" type="number" v-model="moblieCm" class="inputitem" placeholder="请输入手机号"
							style="margin-left: 30rpx;width: 490rpx;
							height: 80rpx;
							background: #F2F2F2;padding-left: 30rpx;
							box-sizing: border-box;">
						<view v-else class="value">
							{{userinfo.account}}
						</view>
					</view>
					<view class="contentitem">
						<view class="lable">
							详细地址
						</view>
						<view class="value">
							{{ userinfo.address}}
						</view>
					</view>
				</view>

				<view class="bottomBtn">
					<view class="btnleft" @click="show = false">
						取消
					</view>
					<view class="btnright" @click="handleSubmitorder">
						确认
					</view>
				</view>
			</view>
		</u-popup>


	</view>

</template>

<script>
	import {
		goodsDetail,
		getAddress,
		userInfo,
		submitOrder,
		salerMobile,
		getmanagerinfo,
		createOrderS,
		payment,
	} from "@/api/api.js"
	var graceRichText = require("../../static/richText.js");
	export default {
		data() {
			return {
				userName: "", //村民姓名
				moblieCm: "", //村民手机号
				number: 1,
				sum: 9.9,
				concat: false,
				show: false,
				goodsDetail: {},
				pageId: null,
				parentId: null,
				userinfo: {},
				unit: null,
				share: {
					userId: null,
				},
				moblie: null,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
			}
		},
		onLoad(options) {
			console.log("000000", options)
			if (options.share) {
				this.share = JSON.parse(options.share)
				this.pageId = this.share.pageId
				this.parentId = uni.getStorageSync('parentId')
				this.concat = true
				this.handlegetmanagerinfo()
				if (uni.getStorageSync("declarationData")) {
					this.userName = uni.getStorageSync("declarationData").userName
					this.moblieCm = uni.getStorageSync("declarationData").moblieCm
				}
				this.getGoodsDetail(this.pageId)
			} else {
				this.pageId = options.id
				this.concat == false
				this.getUserInfo()
			}

		},
		onShareAppMessage(e) {
			this.share.userId = uni.getStorageSync("parentId")
			console.log("分享参数", this.share)
			// this.share = JSON.stringify(this.share)
			return {
				title: this.goodsDetail.name,
				// path: `pages/home/detail?share=${JSON.stringify(this.share)}`
				path: `pages/home/priductList?share=${this.share.userId}`
				//此处传递share=true的目的是：可以在onload中接收到，从而判断是否是通过分享进来的。如果用不到，也可以不传。
			}
		},
		methods: {
			// async handlegetAddress(){
			// 	let res = await getAddress({
			// 		parent_code:this.parentId
			// 	})
			// 	console.log("店长地址",res)
			// },
			handleImgBig(url) {
				uni.previewImage({
					current: 0,
					urls: [url] //必须是网址路径，否则加载不出来，如：http：或https：
				});
			},
			async handlegetmanagerinfo() {
				let res = await getmanagerinfo({
					user_id: this.parentId
				})
				console.log("店长信息", res)
				this.userinfo = res.data
				this.moblie = res.data.account
				this.userinfo.address = this.userinfo.province + this.userinfo.city + this.userinfo.district + this
					.userinfo.town + this.userinfo.village
			},
			async getGoodsDetail(id) {
				let res = await goodsDetail({
					id: id,
					parent_id: this.parentId
				})
				if (res.code == 1000) {
					console.log("商品详情", res)
					this.goodsDetail = res.data
					this.goodsDetail.image = JSON.parse(this.goodsDetail.image)
				}
			},

			handleJIANnUM() {
				if (this.number <= 1) {
					uni.showToast({
						title: '最少要报名1单',
						icon: "none",
						duration: 1000
					});
				} else {
					this.number--
				}
			},
			handleJIAnUM() {
				this.number++
			},
			async getUserInfo() {
				let res = await userInfo()
				console.log("用户信息", res)
				if (res.code == 1000) {
					this.userinfo = res.data
					this.parentId = res.data.id
					this.userinfo.address = this.userinfo.province + this.userinfo.city + this.userinfo.district + this
						.userinfo.town + this.userinfo.village
					this.getGoodsDetail(this.pageId)
				}
			},
			async handleSubmitorder() {


				if (uni.getStorageSync("declarationData")) {
					this.userName = uni.getStorageSync("declarationData").userName
					this.moblieCm = uni.getStorageSync("declarationData").moblieCm
				}

				if (this.concat) {
					if (this.userName == "") {
						uni.showToast({
							title: "请先填写姓名！",
							icon: "none",
							duration: 1500
						});
						return
					}
					if (this.moblieCm == "") {
						uni.showToast({
							title: "请先填写手机号！",
							icon: "none",
							duration: 1500
						});
						return
					}
					if (this.moblieCm.length != 11) {
						uni.showToast({
							title: "手机号格式不正确！",
							icon: "none",
							duration: 1500
						});
						return
					}
				}
				let data = {
					name: this.concat ? this.userName : this.userinfo.name,
					mobile: this.concat ? this.moblieCm : this.userinfo.account,
					good_id: this.pageId,
					count: this.number,
					// province: this.userinfo.province,
					// city: this.userinfo.city,
					// district: this.userinfo.district,
					// town: this.userinfo.town,
					// village: this.userinfo.village,
					// user_id: this.concat ? this.parentId : this.userinfo.id
				}
				let res = await createOrderS(data)
				if (res.code == 1000) {
					console.log("报单", res)
					uni.showToast({
						title: '报名成功',
						icon: "none",
						duration: 1500
					});
					this.number = 1
					this.show = false
					if (this.concat == true) {
						let declaration = {
							userName: this.userName,
							moblieCm: this.moblieCm
						}
						uni.setStorageSync("declarationData", declaration)
					}
					let subres = await payment({
						out_trade_no: res.data.out_trade_no
					})
					console.log("支付信息", res)
					if (subres.code == 1000) {
						uni.requestPayment({
							provider: 'wxpay',
							appId: subres.data.result.appId,
							timeStamp: subres.data.result.timeStamp,
							nonceStr: subres.data.result.nonceStr,
							package: subres.data.result.package,
							signType: subres.data.result.signType,
							paySign: subres.data.result.paySign,
							success(res) {
								console.log("支付成功、、、、、、、、、、、、、、、、")
								uni.showToast({
									title: '支付成功！',
									icon: "none",
									duration: 1500
								});
								if (this.concat) {
									setTimeout(() => {
										uni.redirectTo({
											url: "./villagerOrder"
										})
									}, 2000)
								} else {
									setTimeout(() => {
										uni.redirectTo({
											url: "./managerOrder"
										})
									}, 2000)
								}
							},
							fail(e) {}
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 2000
						});
					}


				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					});
				}
			},
			// async getsalerMobile() {
			// 	let res = await salerMobile()
			// 	// console.log("联系经理",res)
			// 	this.moblie = res.data
			// 	// console.log("this.mobile",this.mobile)
			// },
			handleCallMoilie() {
				uni.makePhoneCall({
					phoneNumber: this.moblie,
					success() {
						console.log("拨打成功")
					},
					fail() {
						console.log("取消")
					},
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.shareBtn {
		width: 256rpx;
		height: 200rpx !important;
		background-color: transparent;
		height: 80rpx;
		position: absolute;
		top: 0rpx;
		border: none !important;
		outline: none !important;
		// background-color: pink;
	}

	.shareBtn::after {
		border: none;
	}

	.subAddress {
		width: 686rpx;
		// height: 796rpx;
		background: #FFFFFF;
		// box-shadow: 0rpx 8rpx 52rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 90rpx 30rpx;
		box-sizing: border-box;

		.title {
			font-size: 64rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #000000;
			line-height: 50rpx;
			text-align: center;
		}

		.addressmessage {
			margin-top: 102rpx;
			padding-bottom: 30rpx;

			.contentitem {
				display: flex;
				margin-bottom: 34rpx;

				.lable {
					width: 200rpx;
					font-size: 40rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #000000;
					line-height: 50rpx;
				}

				.value {
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 50rpx;
					width: 400rpx;
				}
			}
		}

		.bottomBtn {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;

			.btnleft {
				width: 184rpx;
				height: 88rpx;
				background: #A7A7A7;
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				font-size: 48rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 50rpx;
				text-align: center;
				line-height: 88rpx;
			}

			.btnright {
				width: 406rpx;
				height: 88rpx;
				background: linear-gradient(180deg, #FE5C5C 0%, rgba(255, 78, 78, 0.67) 100%);
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				font-size: 48rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 50rpx;
				text-align: center;
				line-height: 88rpx;
			}
		}
	}

	.detail {
		.bannder {
			width: 100%;
			height: 750rpx;
		}

		.content {
			width: 750rpx;
			height: 122rpx;
			background: linear-gradient(180deg, #FF5A5A 0%, #FFA984 100%);
			border-radius: 0rpx 0rpx 32rpx 32rpx;
			display: flex;
			padding: 24rpx 26rpx;
			box-sizing: border-box;
			font-size: 48rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 50rpx;
			justify-content: space-between;

			.left {
				display: flex;
			}
		}

		.message {
			width: 750rpx;
			// height: 288rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			box-shadow: 2rpx 2rpx 30rpx #F7F8FA;
			margin: 30rpx auto;
			padding: 30rpx;
			box-sizing: border-box;
			font-size: 40rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #000000;
			line-height: 50rpx;

			.bottom {
				margin-top: 46rpx;
				display: flex;
				justify-content: space-between;

				.bottomitem {
					width: 144rpx;
					// padding: 0 24rpx;
					border-right: 2rpx solid #A7A7A7;
					display: flex;
					flex-direction: column;
					align-items: center;

					.lable {
						font-size: 22rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: 600;
						color: #A7A7A7;
						line-height: 50rpx;
					}
				}
			}
		}

		.priceandConcat {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.sumprice {
				font-size: 64rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FF4E4E;
				line-height: 50rpx;
			}

			.cancat {
				font-size: 32rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #000000;
				text-align: center;
			}
		}

		.bottomContent {
			width: 100%;
			height: 180rpx;
			background: #ffffff;
			position: fixed;
			bottom: 0;
			padding: 15rpx 0;
			padding-left: 10rpx;
			box-sizing: border-box;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容 iOS 设备 */
			padding-bottom: env(safe-area-inset-bottom);
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			display: flex;
			justify-content: space-between;
			padding-right: 0;
			padding-top: 0;
			box-shadow: 2rpx 2rpx 30rpx #F7F8FA;

			.left {
				display: flex;
				align-items: center;
				margin-top: 66rpx;

				.number {
					margin: 0 20rpx;
					font-size: 30rpx;
				}
			}

			.rightBox {
				display: flex;

				.btn {
					width: 256rpx;
					height: 180rpx;
					background: #FF4E4E;
					border-radius: 32rpx 0rpx 0rpx 0rpx;
					font-size: 80rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 180rpx;
					text-align: center;
				}

				.btns {
					border-radius: 0rpx 32rpx 0rpx 0rpx;
					margin-left: 2rpx;
				}

			}
		}
	}
</style>